<template>
  <div>
    <!-- div class="box-header with-border">
      <h3 class="box-title">{{ personnel.name }}，{{assessmentDetailsData.suName}} 回答问卷详细记录</h3>
    </div -->
    <div class="clearfix">
      <div class="pull-left width70">
        <div class="panel panel-default" v-if="typeof(assessmentDetailsData.anto_map) === 'object'">
          <div class="panel-heading clearfix">
            <span class="panel-title strong">
              系统自动计算项
            </span>
            <span class="pull-right">
              <a data-toggle="collapse" data-parent="#accordion1" href="#collapse">
                <span class="label label-default">详情</span>
              </a>
            </span>
          </div>
          <div class="panel-collapse collapse" id="collapse" aria-expanded="false">
            <div class="panel-body">
              <div v-for="(item, key) in assessmentDetailsData.anto_map">
                <div>
                  <span v-html="key"></span>
                </div>
                <div class="retractive">
                  <span v-html="item"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <span class="panel-title strong">
              分类查看：
              <span>{{ assessmentDetailsData.categorys[selectCategoryIndex.parentIndex].name }} -> {{ selectCategory.name }}</span>
            </span>
          </div>
          <div class="panel-collapse collapse in" aria-expanded="false">
            <div class="panel-body">
              <div class="clearfix bottom10 borderBottom" v-for="(questionData, index) in selectCategory.questions">
                <div class="pull-left width618">
                <div>
                  <label>问题： </label>
                  <span> {{ questionData.item }} {{ questionData.quName }} </span><br/>
                  <span> {{ questionData.quNote }} </span>
                </div>
                <div>
                  <label>回答： </label>
                  <span> {{ questionData.optionAnswer }} </span><br/>
                  <span>得分：{{ questionData.optionScore }}</span><br/>
                  <p>附加问题：{{ questionData.otherOptionsAnswer }}</p>
                </div>
                </div>
                <div class="pull-left width382" v-if="questionData.file">      
                  <img :src="questionData.file" width="100%" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pull-right width30">
        <div class="border padding10">
          <div>
            <label>问卷名称：</label>
            <span>{{assessmentDetailsData.suName}}</span>
          </div>
          <div>
            <label>问卷描述：</label>
            <span>{{assessmentDetailsData.description}}</span>
          </div>
          <div>
            <label>调查时间：</label>
            <span>{{assessmentDetailsData.dateTime}}</span>
          </div>
          <div>
            <label>问题分类：</label>
          </div>
          <ul class="domtree">
            <li v-for="(item, key1) in assessmentDetailsData.categorys">
              {{ item.name }}  
              <ul>
                <li class="pointer" v-for="(itemSon, key2) in item.children" v-on:click="changeCategory(key1, key2)">
                  {{ itemSon.name }} 
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'assessmentDetails',
  data () {
    return {
      selectCategory: {},
      selectCategoryIndex: {
        parentIndex: null,
        index: null
      }
    }
  },
  props: {
    assessmentDetailsData: {
      type: Object,
      default: {}
    },
    // 人员信息详情
    personnel: {
      type: Object,
      default: {}
    },
  },
  components: {
  },
  methods: {
    changeCategory (index1,index2) {
      this.selectCategoryIndex.parentIndex = index1
      this.selectCategoryIndex.index = index2
      this.selectCategory = this.assessmentDetailsData.categorys[index1].children[index2]
    },
  },
  watch: {
    // 监听参数变化
    assessmentDetailsData: {
      handler: function(val) {
        this.changeCategory(0,0)
      },
      // 深度观察
      deep: true
    }
  },
  beforeCreate () {},
  created () {
    this.changeCategory(0,0)
  },
  beforeMount () {},
  mounted () {
    // console.log(this.assessmentDetailsData.anto_map)
  },
  beforeUpdate () {},
  updated () {},
  beforeDestroy () {},
  destroyed () {}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
